import React, { Component,createRef } from 'react'
import {getData} from '../../api/dashboard'
import echarts from 'echarts'
import 'echarts/map/js/china'
import 'echarts/map/js/province/sichuan.js'
import { Row, Col } from 'antd'
export default class DashBoard extends Component {
  chartRef=createRef()
  colRef=createRef()
  state={
    chinaAdd:{},
    chinaTotal:{},
    lastlastUpdateTime:''

  }
  componentDidMount () {
    getData()
    .then(res=>{
      const data = JSON.parse(res.data.data)
      console.log(data)
      this.setState({
        chinaAdd:data.chinaAdd,
        chinaTotal:data.chinaTotal,
        lastlastUpdateTime:data.lastUpdateTime
      })
      const mapData = data.areaTree[0].children.map(res=>({
        name:res.name,
        value:res.total.nowConfirm
      }))
      let CaseData=data.areaTree[0].children.filter(res=> res.name==='四川')
      
      const colData=CaseData[0].children.slice(1)
      let sichuanData = colData.map(res=>({
        name:res.name+'市',
        value:res.total.confirm
      }))
      sichuanData=[...sichuanData,{name:"甘孜藏族自治州",value:0},{name:"阿坝藏族羌族自治州",value:2},{name:"凉山彝族自治州",value:2}]
      console.log('siichuan:',sichuanData)
      console.log('quanguo:',mapData)

      // .map(res=>({
      //   name:res.name,
      //   value:res.total.nowConfirm
      this.drawSichuan(sichuanData)
      this.drawMap(mapData)
    })
  }
   drawMap =(mapData)=>{
    var myChart = echarts.init(this.chartRef.current)
    myChart.setOption({
      title: {
        text: '全国疫情地图',
        subtext:'最新数据来源于腾讯:'+this.state.lastlastUpdateTime,
        sublink:'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
      },
      tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>现有确诊{c}例 '
      },
      visualMap: {
          type: 'piecewise',
          pieces: [
            {lte:10000,color:'red'},
            {lge: 1000, lt:10000,color:'red',colorAlpha:0.8},
            {lge: 100, lt:1000,color:'red',colorAlpha:0.6},
            {lge: 10, lt:100,color:'red',colorAlpha:0.4},
            {lge: 1, lt:10,color:'red',colorAlpha:0.2},
            {lte:0,color:'white'},
          
          ]
      },
   
      series: [
        {
          type:'map',
          name:'疫情数据',
          mapType:'china',
          label:{
            show:true
          },
          data:mapData
        }
      ]
    })
  }
   drawSichuan=(colData)=>{
    var myCol = echarts.init(this.colRef.current)
    myCol.setOption({
      title: {
        text: '四川疫情地图',
        subtext:'最新数据来源于腾讯:'+this.state.lastlastUpdateTime,
        sublink:'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
      },
      tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>累计确诊{c}例 '
      },
      visualMap: {
          type: 'piecewise',
          pieces: [
            {lge: 100, lt:1000,color:'red'},
            {lge: 10, lt:100,color:'red',colorAlpha:0.4},
            {lge: 1, lt:10,color:'red',colorAlpha:0.2},
            {lte:0,color:'white'},
          
          ]
      },
   
      series: [
        {
          type:'map',
          map:'四川',
          mapType:'province',
          label:{
            show:true
          },
          data:colData
        }
      ]
    })
   }
   randomColor=()=>{
     const ch ='0123456789ABCDEF'
     const len =ch.length
     let str='#'
     for(let i=0;i<6;i++){
       const basech = ch.charAt(Math.floor(Math.random()*len))
       str +=basech
     }
     return str
   }
   
  render() {
    
    return (
      <div>
        <h2>最新疫情概览</h2>
        <Row gutter={[16, 24]} >
          <Col className="gutter-row" span={6}>
            <div style={{textAlign:'center',color:'#000',fontWeight:'bold'}}>现有确诊</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>{this.state.chinaTotal.nowConfirm}</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>昨日+{this.state.chinaAdd.nowConfirm}</div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div style={{textAlign:'center',color:'#000',fontWeight:'bold'}}>无症状</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>{this.state.chinaTotal.noInfect}</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>昨日+{this.state.chinaAdd.noInfect}</div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div style={{textAlign:'center',color:'#000',fontWeight:'bold'}}>现有疑似</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>{this.state.chinaTotal.suspect}</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>昨日+{this.state.chinaAdd.suspect}</div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div style={{textAlign:'center',color:'#000',fontWeight:'bold'}}>现有重症</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>{this.state.chinaTotal.nowSevere}</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>昨日+{this.state.chinaAdd.nowSevere}</div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div style={{textAlign:'center',color:'#000',fontWeight:'bold'}}>累计确诊</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>{this.state.chinaTotal.confirm}</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>昨日+{this.state.chinaAdd.confirm}</div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div style={{textAlign:'center',color:'#000',fontWeight:'bold'}}>境外输入</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>{this.state.chinaTotal.importedCase}</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>昨日+{this.state.chinaAdd.importedCase}</div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div style={{textAlign:'center',color:'#000',fontWeight:'bold'}}>累计治愈</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>{this.state.chinaTotal.heal}</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>昨日+{this.state.chinaAdd.heal}</div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div style={{textAlign:'center',color:'#000',fontWeight:'bold'}}>累计死亡</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>{this.state.chinaTotal.dead}</div>
            <div style={{textAlign:'center',color:this.randomColor()}}>昨日+{this.state.chinaAdd.dead}</div>
          </Col>
        </Row>
        <div ref={this.chartRef} style={{width: '800px',height:'600px'}}></div>
        <div ref={this.colRef} style={{width:'800px',height:'600px'}}></div>
      </div>
    )
  }
}
